import React, { Component } from 'react'
import {Layout,Breadcrumb,Menu, Dropdown,Avatar,Tag} from 'antd';
import {withRouter} from 'react-router'
//引入图标
import {
    MenuUnfoldOutlined,
    MenuFoldOutlined,
    UserOutlined
  } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import breadData from './Siderbardata'
import {connect} from 'react-redux'
const { Header} = Layout;
class Topbar extends Component {
    state = {
        collapsed: false, 
        breadlist:[],
        temp:{}
    }
    render() {
      let {username,roleName} =JSON.parse(localStorage.getItem("token"))
      const menu = (
        <Menu>
          <Menu.Item onClick={()=>{
            this.props.history.push("/user-manage/admin")
          }}>
            {roleName}
          </Menu.Item>

          <Menu.Item danger onClick={()=>{
            localStorage.removeItem("token")
            this.props.history.push("/login")
          }}>退出</Menu.Item>
        </Menu>
      )

     return (
            <Header className="site-layout-background" style={{ paddingLeft: 20 }}>
                {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                  className: 'trigger',
                  onClick: this.toggle,
                })}
              <div className="bread">
                <Breadcrumb >
                    <Breadcrumb.Item>
                      <Link to="/home">首页</Link>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                    {
                      this.getBread()
                    }
                    </Breadcrumb.Item>
                  </Breadcrumb>
              </div>

              <div style={{float:"right"}}>
                    <span>欢迎{username}回来</span>
                    <Dropdown overlay={menu}>
                        <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' ,margin:"0 10px"}} icon={<UserOutlined />}></Avatar>
                    </Dropdown>
               </div>
             </Header>
        )
    }
    toggle = () => {
    //  刘宜松更改
        this.props.CollapesdCreator()
       
    }
    getBread=()=>{
      let list = this.props.location.pathname
      return (
       
        this.state.breadlist.map(item=>{
            if(list === item.key){
              return  <Tag  key={item.key} color="skyblue">{item.title}</Tag>
            }
            // return item.key
        })
      )
    }

    componentDidMount() {
      var arr = []
      breadData.forEach(item=>{
        if(item.Children){
          item.Children.forEach(data=>{
            arr.push(data)
          })
        }else{
          arr.push(item)
        }
      })
      this.setState({
        breadlist:arr
      })
    }
}

const mapstateToProps=(state)=>{
  //console.log(state)
  return{
    isCollapsed:state.isCollapsed
  }
}

const mapdispathToProps={
    CollapesdCreator:function(){
      return {
        type:"ArtiecCollapsed"
      }
    }
}


export default  withRouter(connect(mapstateToProps,mapdispathToProps)(Topbar))